<template>
  <div class="app-container">

    <div class="tag-group">
      <el-tag
        v-for="item in items"
        :key="item.label"
        class="tag"
        :type="item.type"
        effect="dark"
        @click="clickFunc(item)"
      >
        {{ item.label }}
      </el-tag>
    </div>
    <el-divider content-position="left">选型图</el-divider>
    <div class="imgContent">
      <el-image v-for="url in urls[index]" :key="url" :src="url" lazy :preview-src-list="urls[index]" class="imgStyle"></el-image>
    </div>

  </div>
</template>

<script>

export default {
  name: "Work",
  data() {
    return {
      index: 0,
      items: [
        {
          type: "danger",
          value: 0,
          label: "所有型号图"
        }, {
          type: "",
          value: 1,
          label: "KQL、KQW【单级泵】"
        }, {
          type: "success",
          value: 2,
          label: "KQWS不锈钢卧式泵"
        }, {
          type: "warning",
          value: 3,
          label: "KQWH、KQH【化工泵】"
        }, {
          type: "danger",
          value: 4,
          label: "WL干式排污泵"
        }, {
          type: "",
          value: 5,
          label: "潜水排污泵"
        }, {
          type: "success",
          value: 6,
          label: "KQSN双吸泵"
        }

      ],

      urls: [
        [" https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/dataTable/all.png"],
        [
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/%E5%8D%95%E7%BA%A7%E6%B3%B5-2%E7%BA%A7%E7%94%B5%E6%9C%BA.png",
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/%E5%8D%95%E7%BA%A7%E6%B3%B5-4%E7%BA%A7%E7%94%B5%E6%9C%BA.png",
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/%E5%8D%95%E7%BA%A7%E6%B3%B5-%E5%A4%A7%E5%8F%A3%E5%BE%84.png"
        ],
        [
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/KQWS.png"
        ],
        [
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/%E5%8C%96%E5%B7%A5%E6%B3%B5-2%E7%BA%A7%E7%94%B5%E6%9C%BA.png",
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/%E5%8C%96%E5%B7%A5%E6%B3%B5-4%E7%BA%A7%E7%94%B5%E6%9C%BA.png"
        ],
        [
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/WL-%E5%B0%8F%E5%8A%9F%E7%8E%87.png",
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/WL2.png"
        ],
        [
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/WQ%3AE.png",
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/WQ-11~22kW.png",
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/WQ-30kW%E4%BB%A5%E4%B8%8A.png"
        ],
        [
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/KQSN1.png",
          "https://zhouxf-1309209757.cos.ap-shanghai.myqcloud.com/kq/img/spectrum/KQSN2.png"
        ]
      ]

    };
  },
  created() {
    // this.getList();
  },
  methods: {

    clickFunc(item) {
      this.index = item.value;
    }

  }
};
</script>
<style scoped lang="scss">
.tag{
    cursor: pointer;
    margin: 8px;
}
.imgStyle{
    width: 32%;
    height: 400px;
    margin:0 3px;
}
</style>
